<!DOCTYPE html>

<html>

<head>
    <title></title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id="app-3">
        <simple-counter></simple-counter>
        <simple-counter></simple-counter>
        <simple-counter></simple-counter>
    </div>
    <script>
        Vue.component('simple-counter', {
          template: '<button v-on:click="counter += 1">{{ counter }}</button>',
          // 技术上 data 的确是一个函数了，因此 Vue 不会警告，
          // 但是我们返回给每个组件的实例的却引用了同一个data对象
          data: function () {
            return { counter: 0 };
          }
        })
        new Vue({
          el: '#app-3'
        })
    </script>
</body>


</html>